<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Hướng dẫn sử dụng 3D Transform trong CSS3</title>
    <link href="http://y2graphic.com/templates/v2/favicon.ico" rel="shortcut icon" type="image/x-icon" />
	<script type="text/javascript" src="scripts/jquery.1.7.1.min.js"></script>
	<script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script>	
	<script type="text/javascript" src="scripts/modernizr.2.5.3.min.js"></script>	
	<link rel="stylesheet" type="text/css" href="css/style.css">
	
   <!--Không copy đoạn này vào trang web của bạn. Thanks-->
		<script type="text/javascript">
          var _gaq = _gaq || [];
          _gaq.push(['_setAccount', 'UA-32520619-1']);
          _gaq.push(['_setDomainName', 'y2graphic.com']);
          _gaq.push(['_trackPageview']);
        
          (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
          })();
        </script>
   <!--Không copy đoạn này vào trang web của bạn. Thanks-->

	<script type="text/javascript">
	$(function () {
		if ($('html').hasClass('csstransforms3d')) {	
			$('.thumb').removeClass('scroll').addClass('flip');		
			$('.thumb.flip').hover(
				function () {
					$(this).find('.thumb-wrapper').addClass('flipIt');
				},
				function () {
					$(this).find('.thumb-wrapper').removeClass('flipIt');			
				}
			);
			
		} else {

			$('.thumb').hover(
				function () {
					$(this).find('.thumb-detail').stop().animate({bottom:0}, 500, 'easeOutCubic');
				},
				function () {
					$(this).find('.thumb-detail').stop().animate({bottom: ($(this).height() * -1) }, 500, 'easeOutCubic');			
				}
			);

		}
	
	});
	</script>
</head>
<body>

<div id="container">
	<div id="info">
		<h1>Hướng dẫn sử dụng 3D Transform trong CSS3</h1>
    </div>
	
	<div class="thumb scroll">
		<div class="thumb-wrapper">
			<img src="images/1.jpg" alt="" />
			<div class="thumb-detail">
				<a href="http://y2graphic.com/html-va-css/mot-so-cong-cu-huu-ich-de-hoc-css3" target="_blank">
					Một số công cụ hữu ích để học CSS3
				</a>				
			</div>
		</div>
	</div>		
	
	<div class="thumb scroll">
		<div class="thumb-wrapper">
			<img src="images/2.jpg" alt="" />
			<div class="thumb-detail">
				<a href="http://y2graphic.com/html-va-css/huong-dan-tao-audio-bang-html5-va-css3" target="_blank">
					Hướng dẫn tạo Audio bằng HTML5 và CSS3
				</a>
			</div>
		</div>
	</div>
	
	<div class="thumb scroll">
		<div class="thumb-wrapper">
			<img src="images/3.jpg" alt="" />
			<div class="thumb-detail">
				<a href="http://y2graphic.com/html-va-css/huong-dan-tao-form-dang-nhap-bang-css3" target="_blank">
					Hướng dẫn tạo form đăng nhập bằng CSS3
				</a>				
			</div>
		</div>
	</div>
	
	<div class="thumb scroll">
		<div class="thumb-wrapper">
			<img src="images/4.jpg" alt="" />
			<div class="thumb-detail">
				<a href="http://y2graphic.com/html-va-css/20-bai-huong-dan-css3-khong-the-bo-qua" target="_blank">
					20 bài hướng dẫn CSS3 không thể bỏ qua
				</a>				
			</div>
		</div>
	</div>
	

	<div class="thumb scroll">
		<div class="thumb-wrapper">
			<img src="images/5.jpg" alt="" />
			<div class="thumb-detail">
				<a href="http://y2graphic.com/graphic-design/nhieu-y-tuong-hay-trong-thiet-ke-name-card" target="_blank">
					Nhiều ý tưởng hay trong thiết kế namecard
				</a>
			</div>
		</div>
	</div>	
	
	<div class="thumb scroll">
		<div class="thumb-wrapper">
			<img src="images/6.jpg" alt="" />
			<div class="thumb-detail">
				<a href="http://y2graphic.com/graphic-design/cam-hung-thiet-ke-thuong-hieu-insure-risk" target="_blank">
					Cảm hứng thiết kế thương hiệu Insure Risk 
				</a>				
			</div>
		</div>
	</div>

</div>	
	
</body>
</html>